<script lang="ts" setup>
import { ref } from 'vue';

const money = ref(100);

const buy = (price: number) => {
  money.value -= price;
};

</script>

<template>
  <div class="app">
   <div class="box">
    <h3>黑马自动售卖机</h3>
    <button @click="buy(3)">可乐3元</button>
    <button @click="buy(5)">牛奶5元</button>
    <button @click="buy(10)">咖啡10元</button>
    <button @click="money--">减1</button>
   </div>
   <p>银行卡余额:{{ money }}元</p>
  </div>
</template>

<style scoped>
.box {
  border: 3px solid #000;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  width: 300px;
}
.h3 {
  margin: 10px 0 20px 0;
}
.p {
  margin: 20px ;
}
</style>
